/* Beamer's Beaver color theme */

@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css');

:root {
  --qd-primary-color: rgb(187, 39, 26);
  --primary-darker: rgb(149, 29, 18);
  --secondary: rgb(236, 236, 236);
  --tertiary: rgb(216, 216, 216);

  --qd-main-color: rgb(10, 10, 10);
  --qd-background-color: white;
  --qd-link-color: var(--qd-primary-color);
  --qd-color-on-primary: var(--qd-background-color);
  --qd-callout-background-color: rgb(234, 233, 247);
  --qd-callout-foreground-color: rgb(83, 81, 152);
  --qd-mermaid-node-background-color: var(--qd-background-color);
  --qd-mermaid-node-text-color: var(--qd-main-color);
}

.quarkdown {
  h1, h2 {
    color: var(--qd-primary-color) !important;
  }

  h1:not(.box h1) {
    background-color: var(--secondary);
  }

  .box {
    > header > h4 {
      color: inherit;
    }

    &.callout {
      --box-header-background-color: color-mix(in srgb, var(--qd-callout-foreground-color) 7%, var(--qd-callout-background-color));

      .box-content li::marker {
        color: var(--qd-callout-foreground-color);
      }

      &:has(.box-content h1) {
        background-color: var(--secondary);
      }
    }
  }

  .color-preview {
    border-color: var(--secondary) !important;
  }

  .page-margin-bottom-center > * {
    background-color: var(--tertiary);
    color: var(--qd-primary-color);

    &:first-child {
      background-color: var(--qd-primary-color);
      color: white;
    }

    &:nth-child(even) {
      background-color: var(--secondary);
    }
  }
}